<template>
  <div class="main">
    <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="20" :offset="0">
            <el-form ref="form" label-width="80px" :inline="true" size="mini">
                <el-form-item label="">
                    <el-input placeholder="标题名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" >查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="addFormVisible=true;topic.tid=0">添加</el-button>
                </el-form-item>
            </el-form>
            
        </el-col>
    </el-row>
    
    <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="20" :offset="0">
            <el-table :data="topicList" border stripe size="mini">
                <el-table-column prop="tname" label="主题"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="primary" round size="mini" @click="editTopic(scope.$index,scope.row)">修改</el-button>
                        <el-button type="danger" round size="mini" @click="delTopic(scope.$index,scope.row.tid)">删除</el-button>   
                    </template>   
                </el-table-column>
            </el-table>      
        </el-col>
    </el-row>

    <!-- 添加主题 -->
    <el-dialog
        :title="topic.tid == 0 ? '添加主题':'修改主题'"
        :visible.sync="addFormVisible"
        size="mini" width="30%">
        <el-form  ref="form" :model="topic"  label-width="80px" :rules="rules" :inline="true" size="mini">
            <el-form-item label="主题" prop="tname">
                <el-input v-model="topic.tname"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">{{topic.tid == 0 ? '立即创建':'立即修改'}}</el-button>
            </el-form-item>
        </el-form>
        
        <span slot="footer">
            <el-button @click="addFormVisible = false" size="mini">取消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name:'TopicManager',
    data(){
        return {
            topicList:[],
            addFormVisible:false,
            topic:{
                tid:0,
                tname:''
            },
            rules:{
                tname:[
                    {
                        type:'string',
                        required:true,
                        message:'请输入主题',
                        trigger:'blur'
                    },
                    {
                        type:'string',
                        validator:(_,val,callback)=>{
                            this.$axios({
                                url:'/api/checkTopicName',
                                params:{
                                    tname:this.topic.tname
                                }
                            }).then(rs=>{
                                if(rs.data.data){
                                    callback(new Error('主题重复'))
                                }else{
                                    callback()
                                }
                            })
                        },
                        trigger:'blur'
                    }
                ]
            }
        }
    },
    watch:{
        addFormVisible(val){
            if(!val){
                this.topic.tid=0;
                this.topic.tname=''
            }
            this.$nextTick(()=>{
                this.$refs.form.clearValidate()
            })
        }
    },
    created(){
        this.getTopicList()
    },
    methods:{
        getTopicList(){
            this.$axios({
                url:'/api/allTopic',
            }).then(rs=>{
                this.topicList = rs.data.data
            })
        },
        submitForm(){
            this.$refs.form.validate(flag=>{
                if(flag){
                    this.$axios({
                        url: this.topic.tid ==0 ? '/api/addTopic' :'/api/modifyTopic',
                        method:'post',
                        data:{...this.topic}     
                    }).then(rs=>{
                        if(rs.data.data){
                            this.$message.success(this.topic.tid ==0 ? '主题添加成功':'主题修改成功')
                            this.addFormVisible = false
                            this.getTopicList()
                        }else{
                            this.$message.error(this.topic.tid ==0 ? '主题添加失败':'主题修改失败')
                        }
                    })
                }
            })
        },
        editTopic(index,topic){
            this.isAdd = false
            this.topic.tid = topic.tid
            this.topic.tname = topic.tname
            this.addFormVisible = true
        },
        delTopic(index,tid){
            
            this.$confirm('确认删除？','提示').then(()=>{
                console.log("tid",tid)
                this.$axios({
                    url:'/api/delTopic',
                    params:{
                        'tid':tid
                    }
                }).then(rs=>{
                    console.log(rs.data)
                    if(rs.data.code == 5200){
                        this.$message.success(rs.data.msg)
                        this.getTopicList()
                    }else{
                        this.$message.error(rs.data.msg)
                    }
                })
            }).catch(()=>{})
        }
    }
}
</script>

<style>

</style>